<template>
  <div class="my-work">
    <c-tabs :labels="tabsLabel" @click="tabsClick">
      <template #right>
        <router-link class="more new" :to="{ name: 'Flow' }">更多</router-link>
      </template>
    </c-tabs>

    <div class="list">
      <a href="javascript:;" v-for="(item, idx) in listSource" :key="idx" @click="_goFlowDetail(item.id)" :title="item.title">
        <span class="name">{{ item.title }}</span>
        <div class="date">
          <span class="promoter">申请人：{{ item.promoter }}</span>
          <span class="system">来源：{{ item.systemName }}</span>
          <span class="time">[{{ $moment(item.receiverTime).format("MM-DD") }}]</span>
        </div>
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import CTabs from "./cTabs.vue";

@Component({
  name: "MyWork",
  components: {
    CTabs
  }
})
export default class MyWork extends Base {
  private timer: any = null;
  private listSource: any[] = [];
  private tabIndex = 0;
  private tabs: any[] = [
    { label: "待办", key: "daiban", count: 0, pendType: "1" },
    { label: "待阅", key: "daiyue", count: 0, pendType: "2" }
  ];

  private destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  private created() {
    this.tabsClick();
    this.getProcessCount();

    this.timer = setInterval(() => {
      this.getProcessList(false);
    }, 30000);
  }

  private tabsClick(e?: any) {
    if (e) {
      this.tabIndex = e.activeIndex;
    }

    this.getProcessList();
  }

  private getProcessCount() {
    // 获取待办数量
    this.$api
      .ProcessCount({
        pendType: "1",
        status: "2",
        receiverUserCode: this.currentUser.userNo
      })
      .then((res: Api.Response) => this.$set(this.tabs[0], "count", res.data));

    // 获取待阅数量
    this.$api
      .ProcessCount({
        pendType: "2",
        status: "2",
        receiverUserCode: this.currentUser.userNo
      })
      .then((res: Api.Response) => this.$set(this.tabs[1], "count", res.data));
  }

  private async getProcessList(clearList = true) {
    if (clearList) {
      this.listSource = [];
    }
    const res = await this.$api.ProcessList(this.processListParams);
    if (res && res.code === 200) {
      this.listSource = res.rows;
    }
  }

  private get processListParams() {
    const _return = {
      pageNum: 1,
      pageSize: 7,
      sortBy: "initiationTime",
      order: "desc",
      pendType: this.tabs[this.tabIndex].pendType,
      status: "2",
      receiverUserCode: this.currentUser.userNo
    };
    return _return;
  }

  private get tabsLabel() {
    return Array.from(this.tabs, (item: any) => {
      return `${item.label}(${item.count})`;
    });
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.my-work {
  .scale(width, 920px);
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
  .more {
    cursor: pointer;
    padding-right: 15px;
    font-size: 12px;
    background: url("~@/assets/images/bg-13.png") right center no-repeat;
    background-size: 14px 15px;
    display: inline-block;
  }
  .new {
    position: relative;
    &::after {
      position: absolute;
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background-color: #f33939;
      left: -3px;
      top: 10px;
    }
  }

  .list {
    padding-top: 4px;
  }

  .list a {
    line-height: 150%;
    display: flex;
    padding-left: 30px;
    padding-right: 15px;
    position: relative;
    justify-content: space-between;
    margin-top: 4px;
    .scale(padding-top, 4px);
    .scale(padding-bottom, 4px);

    &:hover {
      background-color: #f6f6fa;
    }

    &::after {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background-color: #b6b7b8;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
    }

    .name {
      width: 55%;
      flex-shrink: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .promoter {
      flex-shrink: 0;
      width: 46%;
    }

    .system {
      flex-shrink: 0;
      width: 33%;
    }

    .time {
      flex-shrink: 0;
      // width: 25%;
    }

    .date {
      flex: 1;
      margin-left: 30px;
      display: flex;
      justify-content: space-between;
    }

    .date span {
      // margin-left: 20px;
      &:first-child {
        // margin-left: 0;
      }
    }
  }
}
</style>
